//baseURL
axios.defaults.baseURL='http://pcapi-xiaotuxian-front-devtest.itheima.net'
let url=location.href
let url_arr=url.split('url=')
url=url_arr[1]
// console.log(url)



function goods_axios(url){
    var config={
        method:'get',
        url:url,
        headers: { 
            'User-Agent': 'Apifox/1.0.0 (https://apifox.com)'
         }
    }

    axios(config)
    .then(res=>{
        
       

        var imgs=res.data.result.mainPictures
        var price=res.data.result.price
        var good=res.data.result
        var details=res.data.result.details.properties
      //imgs
      class Createimg{
         //构造器函数(属性挂载)
         constructor(select,data){
            this.elem=document.querySelector(select);
            this.data=data
         }
         
         //方法
         render(){
            this.data.forEach(elem=>{
               this.elem.innerHTML = this.data.map(item => `<li class='active'><img src=${item} alt=""></li>`).join('');
            })
         }
      }
    
          
    
                 var img_obj=new Createimg('.iot_img>ul',imgs);
                 img_obj.render();


     //price
     class Createprice{
      //构造器函数(属性挂载)
      constructor(select,data){
         this.elem=document.querySelector(select);
         this.data=data

      }
      
      //方法
      render(){
         this.elem.innerHTML =`<p>￥${this.data}</p>`
      }
   }
    
                 var price_obj=new Createprice('.iot_price',price);
                 price_obj.render();


     //good
    
    class Creategood{
      //构造器函数(属性挂载)
      constructor(select,data){
         this.elem=document.querySelector(select);
         this.data=data
      }
      
      //方法
      render(){
         this.elem.innerHTML =`
         <div class="iot_goodtitle">
               <div class="iot_goodname">${this.data.name}</div>
               <div class="iot_gooddesc">${this.data.desc}</div>
         </div>
               <div class="iot_address">
                    <div>选择  请选择商品规格</div>
                    <div>送至  请选择收货地址</div>
                    <div>服务  无忧退 快速退款 免费包邮</div>
               </div>`
      }
   }
   
    
                 var good_obj=new Creategood('.iot_good',good);
                 good_obj.render();
    


    


     //details
    class Createdetails{
      //构造器函数(属性挂载)
      constructor(select,data){
         this.elem=document.querySelector(select);
         this.data=data
      }
      
      //方法
      render(){
         this.data.forEach(elem=>{
            this.elem.innerHTML = this.data.map(item => ` <div>${item.name} :  ${item.value}</div>`).join('');
         })
      }
   }
 
    
                 var details_obj=new Createdetails('.iot_detailsall',details);
                 details_obj.render();


                 const thegood={
                    img:imgs[0],
                    price:price,
                    good:good,
                  }
                  window.localStorage.setItem('thegood',JSON.stringify(thegood))

        
        
    })
}
goods_axios(url)

//轮播图
setTimeout(() => {
   window.lis=document.querySelectorAll('.iot_img>ul>li')
    
 }, 3000);
 var index=0
setInterval(() => {
  var lis=window.lis
  lis.forEach(l=>{
     l.className=''
  })
  lis[index].className='active'

  index+=1
  if(index>4){
     index=0
  }
}, 3000);


// 返回键
const a=document.querySelector('.iot_back')
a.addEventListener('click',function(){
    window.history.back()
})

 
        //加入购物车
       const btns=document.querySelectorAll('button')
       btns[0].addEventListener('click',function(){   
          var thegood=JSON.parse(window.localStorage.getItem('thegood'))
           // 从localStorage中获取购物车的信息
          var cartItems = JSON.parse(localStorage.getItem("cartItems")) || [];
      
           // 将商品添加到购物车数组中
           cartItems.push(thegood);
      
           // 更新购物车信息
           localStorage.setItem("cartItems", JSON.stringify(cartItems));
      
           // 提示用户已成功添加商品到购物车
           alert("成功添加商品到购物车！");
        })
      
       
 
   